<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格与表单示例</title>
    <style>
        /* 表格样式 */
        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse; /* 合并边框 */
            text-align: center;
        }
        th, td {
            border: 1px solid #333;
            padding: 10px;
        }
        th {
            background-color: #f0f0f0;
        }
        thead {
            color: #0066cc;
        }
        tfoot {
            background-color: #f9f9f9;
            font-weight: bold;
        }

        /* 表单样式 */
        .form-container {
            width: 60%;
            margin: 30px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: inline-block;
            width: 100px;
            vertical-align: top; /* 与多行文本域对齐 */
        }
        input[type="text"], 
        input[type="password"], 
        select, 
        textarea {
            width: 70%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        textarea {
            height: 100px;
            resize: vertical; /* 允许垂直调整大小 */
        }
        .btn-group {
            margin-left: 104px; /* 与label对齐 */
        }
        button {
            padding: 8px 16px;
            margin-right: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button[type="submit"] {
            background-color: #4CAF50;
            color: white;
        }
        button[type="reset"] {
            background-color: #f44336;
            color: white;
        }
    </style>
</head>
<body>
    <h2 style="text-align: center;">表格与表单标签应用示例</h2>

    <!-- 表格示例：学生成绩表 -->
    <h3 style="text-align: center;">学生成绩表（表格标签应用）</h3>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th colspan="2">课程成绩（满分100）</th> <!-- 合并两列 -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2023001</td>
                <td>张三</td>
                <td>男</td>
                <td>数学：92</td>
                <td>英语：88</td>
            </tr>
            <tr>
                <td>2023002</td>
                <td>李四</td>
                <td>女</td>
                <td>数学：85</td>
                <td>英语：95</td>
            </tr>
            <tr>
                <td>2023003</td>
                <td>王五</td>
                <td>男</td>
                <td>数学：78</td>
                <td>英语：82</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">平均分</td> <!-- 合并三列 -->
                <td>85</td>
                <td>88.3</td>
            </tr>
        </tfoot>
    </table>

    <!-- 表单示例：用户注册表单 -->
    <h3 style="text-align: center;">用户注册（表单标签应用）</h3>
    <form class="form-container" action="#" method="post">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" required placeholder="请输入用户名">
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" required placeholder="请输入密码">
        </div>

        <div class="form-group">
            <label>性别：</label>
            <input type="radio" id="male" name="gender" value="male" checked>
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>
        </div>

        <div class="form-group">
            <label>爱好：</label>
            <input type="checkbox" id="hobby1" name="hobby" value="reading">
            <label for="hobby1">阅读</label>
            <input type="checkbox" id="hobby2" name="hobby" value="sports">
            <label for="hobby2">运动</label>
            <input type="checkbox" id="hobby3" name="hobby" value="coding">
            <label for="hobby3">编程</label>
        </div>

        <div class="form-group">
            <label for="education">学历：</label>
            <select id="education" name="education">
                <option value="highschool">高中</option>
                <option value="college" selected>专科</option>
                <option value="bachelor">本科</option>
                <option value="master">硕士</option>
            </select>
        </div>

        <div class="form-group">
            <label for="intro">个人简介：</label>
            <textarea id="intro" name="intro" placeholder="请输入个人简介..."></textarea>
        </div>

        <div class="form-group">
            <label for="avatar">上传头像：</label>
            <input type="file" id="avatar" name="avatar">
        </div>

        <div class="btn-group">
            <button type="submit">提交</button>
            <button type="reset">重置</button>
            <button type="button" onclick="alert('普通按钮点击')">帮助</button>
        </div>
    </form>
</body>
</html>